<template>
  <view class="container">
    <HeadNav :title="detailInfo?.packName" back />
    <view class="card-img">
      <image v-if="detailInfo.fileUrl" :src="detailInfo.fileUrl"></image>
      <view v-else class="no-image"></view>
    </view>
    <view class="card-content">
      <view class="card-content-top">
        <view class="card-title">{{ detailInfo?.packName }}</view>
        <view class="card-subtitle">{{ detailInfo?.packCode }}</view>
      </view>

      <view
        v-if="detailInfo.description"
        class="effect-text"
        style="white-space: pre-wrap"
      >
        <!-- 产品简介： {{detailInfo?.id}}重返无声深海，唤醒被遗忘的回响。《鸣潮TCG》首发系列「深潮回响」补充包正式登场！全新共鸣者、战技、回响卡牌等待你收集，构筑属于你的独特战术体系。 每包包含： • 卡牌总数：8 张 • 普通卡 ×
				5 • 稀有卡 × 2 • 极品卡 / 闪卡 × 1（抽中概率） 系列亮点： • 收录卡牌：共120种（含30张特效闪卡） • 引入新关键词：「超频」、「断律」 • 首次登场角色卡：「吟光 · 琉炁」 •
				所有卡牌均可用于标准构筑模式 -->
        {{ detailInfo.description }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
import HeadNav from '@/components/HeadNav'
import { getProductDetails } from '@/api/product'

const detailInfo = ref({})
onLoad(options => {
  console.log('options', options)
  getData(options.id)
})

const getData = async id => {
  try {
    uni.showLoading({
      title: '正在加载...'
    })
    const res = await getProductDetails(id)
    detailInfo.value = res.data
    uni.hideLoading()
  } catch (error) {
    uni.hideLoading()
    uni.showToast({
      title: '查询产品数据失败，请稍后再试',
      icon: 'error'
    })
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f0f0ee;
  // padding: 32rpx 32rpx 0 32rpx;
  padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
  font-family: PingFangSC-Regular, sans-serif;
}

.card-img {
  height: 1000rpx;
  padding: 0 32rpx;
  margin-top: 32rpx;

  image {
    height: 100%;
    width: 100%;
  }

  .no-image {
    background-color: $no-image-color;
    width: 100%;
    height: 100%;
  }
}

.card-content {
  padding: 0 32rpx;
  // margin-top: 60rpx;
  .card-content-top {
    height: 376rpx;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: url(https://ucp-tcg.com:18001/mc/app/static/product2.png)
      no-repeat;
    background-size: 100% 100%;
  }

  .card-title {
    line-height: 66rpx;
    color: #333333;
    font-size: 48rpx;
    transform: translateY(20rpx);
  }

  .card-subtitle {
    color: #bb9f5e;
    line-height: 40rpx;
    font-size: 28rpx;
    transform: translateY(20rpx);
  }

  .effect-text {
    border: 2rpx solid #dddddd;
    border-radius: 12rpx 0 12rpx 0;
    background-color: #fff;
    padding: 28rpx;
    margin-bottom: 32rpx;
  }
}
</style>
